<template>
    <div class="common-layout">
        <el-container>
            <el-header style="margin: 10px 0 0 10px;">
                <center-header class="center-header"></center-header>
            </el-header>
            <el-container>
                <el-aside style="margin-top: 20px;width: 260px;">
                    <center-side-menu class="center-side-menu" :currentPath="currentPath"
                        @update:currentPath="updateCurrentPath"></center-side-menu>
                </el-aside>
                <el-main style="margin-left: 10px;">
                    <center-main-box :currentPath="currentPath"></center-main-box>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>



<script setup>
import { ref } from 'vue';

import CenterHeader from "@/components/center/CenterHeader.vue";
import CenterSideMenu from "@/components/center/CenterSideMenu.vue";
import CenterMainBox from "../centerMainBox/MainBox.vue";

// 默认初始路由
const currentPath = ref("/home")

const updateCurrentPath = (newPath) => {
    currentPath.value = newPath;
}

</script>

<style lang="scss" scoped></style>